<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>五指山污水处理系统</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/huazhi/lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/huazhi/css/public.css" media="all">
    <link rel="shortcut icon" href="<%=request.getContextPath()%>/huazhi/images/favicon.ico"/>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-card">
            <div class="layui-card-body">
                <blockquote class="layui-elem-quote">
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <input name="starttime" class="layui-input" id="Sdate"
                                   placeholder="请选择起始时间" readonly="readonly">
                        </div>
                        <div class="layui-input-inline">
                            <input name="endtime" class="layui-input" id="Edate"
                                   placeholder="请选择结束时间" readonly="readonly">
                        </div>
                        <div class="layui-input-inline">
                            <select name="endtime" style="width: 200px" class="layui-input" id="xz">
                            </select>
                        </div>
                        <div class="layui-input-inline">
                            <select name="endtime" style="width: 200px" class="layui-input" id="cwh">
                            </select>
                        </div>
                        <div class="layui-input-inline">
                            <select name="endtime" style="width: 200px" class="layui-input" id="zrc">
                            </select>
                        </div>
                        <button class="layui-btn" id="search_btn" data-type="reload">开始统计</button>
                    </div>
                </blockquote>
                <table class="layui-hide" id="circuitTable" lay-filter="circuitTables"></table>
                <div id="laypage"></div>
            </div>
        </div>
    </div>
</div>
<input type="hidden" id="curnum" value="1">


<script src="<%=request.getContextPath()%>/huazhi/lib/layui-v2.5.5/layui.all.js"></script>
<script src="<%=request.getContextPath()%>/huazhi/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>
    layui.use(['table', 'layer', 'dossier', 'laydate'], function () {
        var $ = layui.jquery,
            table = layui.table,
            layer = layui.layer,
            laydate = layui.laydate;

        var xzText = '';
        var cwhText= '';
        var zrcText= '';

        laydate.render({
            elem:'#Sdate',
            type:'date'
        });
        laydate.render({
            elem:'#Edate',
            type:'date'
        });
        //搜索事件
        var active = {
            reload: function () {  //data-type='reload'
                var starttime = $("#Sdate").val();
                var endtime = $("#Edate").val();
                var xz ='';
                var cwh = '';
                var zrc = '';
                var xzobj = document.getElementById("xz"); //定位id
                var xzindex = xzobj.selectedIndex
                if(xzobj.options[xzindex]){
                     xz = xzobj.options[xzindex].text
                }
                var cwhobj = document.getElementById("cwh"); //定位id
                var cwhindex = cwhobj.selectedIndex
                if(cwhobj.options[cwhindex]){
                     cwh = cwhobj.options[cwhindex].text
                }

                var zrcobj = document.getElementById("zrc"); //定位id
                var zrcindex = zrcobj.selectedIndex
                if(zrcobj.options[zrcindex]){
                    zrc = zrcobj.options[zrcindex].text
                }
                $("#curnum").val("1");
                table.reload('circuitTable', { //表格的id
                    where: {
                        sxStaDate:starttime,
                        sxEndDate:endtime,
                        xz:xz,
                        cwh:cwh,
                        zrc:zrc,
                    },
                    text: {
                        none: '暂无相关数据' //默认：无数据。注：该属性为 layui 2.2.5 开始新增
                    }
                })
            }
        };

        $.ajax({
            type: "get",
            url: "<%=request.getContextPath()%>/rest/base/getXzglSelect",
            dataType: "json",
            async: false,
            data:{
                xzzdId:-1
            },
            success: function (msg) {
                document.getElementById("xz").options.length = 0;
                var content = '<option value="">请选择乡镇</option>';
                var  xzSelect = $("#xz");
                for (var i = 0;i<msg.xzzdList.length;i++){
                    content+='<option value="' + msg.xzzdList[i].id + '">' + msg.xzzdList[i].title + '</option>';;
                }
                xzSelect.append(content)
            }

        })

        document.getElementById("xz").onchange=function (){
            var obj = document.getElementById("xz"); //定位id
            var index = obj.selectedIndex
            var value = obj.options[index].value
            xzText =  obj.options[index].text
            $.ajax({
                type: "post",
                url: "<%=request.getContextPath()%>/rest/base/getXzglSelect",
                dataType: "json",
                async: false,
                data:{
                    'xzzdId':value,
                },
                success: function (msg) {
                    document.getElementById("cwh").options.length = 0;
                    var content = '<option value="">请选择村委会</option>';
                    var  cwhSelect = $("#cwh");
                    for (var i = 0;i<msg.xzzdList.length;i++){
                        content+='<option value="' + msg.xzzdList[i].id + '">' + msg.xzzdList[i].title + '</option>';;
                    }
                    cwhSelect.append(content)

                }
            })
        }

        document.getElementById("cwh").onchange=function (){
            var obj = document.getElementById("cwh"); //定位id
            var index = obj.selectedIndex
            var value = obj.options[index].value
            cwhText = obj.options[index].text
            $.ajax({
                type: "post",
                url: "<%=request.getContextPath()%>/rest/base/getZrcs",
                dataType: "json",
                async: false,
                data:{
                    'xzzdId':value,
                },
                success: function (msg) {
                    var  content = ""
                    document.getElementById("zrc").options.length = 0;
                    if(msg.xzzdList.length>0){
                        content = '<option value="">请选择自然村</option>';
                    }else {
                        content = '<option value="">没有可选择的自然村</option>';
                    }
                    var  zrcSelect = $("#zrc");
                    for (var i = 0;i<msg.xzzdList.length;i++){
                        content+='<option value="' + msg.xzzdList[i].id + '">' + msg.xzzdList[i].title + '</option>';;
                    }
                    zrcSelect.append(content)
                }
            })
        }
        document.getElementById("zrc").onchange=function (){
            var obj = document.getElementById("zrc"); //定位id
            var index = obj.selectedIndex
            zrcText = obj.options[index].text
        }


        $('#search_btn').on('click', function () { //搜索的id
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        table.render({
            elem: '#circuitTable'
            , url:  "<%=request.getContextPath()%>/rest/base/getCircuitTj"
            , height: 'full-200'
            , title: '巡查巡检表'
            , toolbar: ''
            ,defaultToolbar: ['filter', 'print','exports']
            ,totalRow: true //开启合计行
            , cols: [[
                {title: 'ID', width: 70, sort: true, fixed: 'left', type: 'numbers' ,  totalRowText: '合计'},
                {field: 'xz', title: '乡镇', sort: true},
                {field: 'cwh', title: '村委会', sort: true},
                {field: 'zrc', title: '自然村', sort: true},
                {field: 'dunshu', title: '处理吨数', sort: true,totalRow:true},
                {field: 'xccs', title: '日常巡查次数', sort: true,totalRow:true},
                {field: 'wxcs', title: '维修次数', sort: true,totalRow:true},
                {field: 'gwxccs', title: '管网巡查次数', sort: true,totalRow:true}
                ]]
            , text: {
                none: '暂无相关数据' //默认：无数据。注：该属性为 layui 2.2.5 开始新增
            },
            // limits:[10, 20, 30, 40, 50],
            done: function (res, curr, count) {
                console.log(res)
                var dunweiDiv = '.layui-table-total div:eq(' + 4 + ')';
                var xcDiv = '.layui-table-total div:eq(' + 5 + ')';
                var wxDiv='.layui-table-total div:eq(' + 6 + ')';
                var gwDiv ='.layui-table-total div:eq(' + 7 + ')';
                var dunwei =0;
                var xc = 0;
                var wx =0;
                var gw =0;
                for (var i =0;i<res.data.length;i++){
                    var item = res.data[i]
                 if(item.xz){
                     if(item.dunshu){
                         dunwei+=parseInt(item.dunshu)
                     }
                     if(item.xccs){
                         xc+=parseInt(item.xccs)
                     }
                     if (item.wxcs){
                         wx+=parseInt(item.wxcs)
                     }
                     if(item.gwxccs){
                         gw +=parseInt(item.gwxccs)
                     }
                 }
                    $(dunweiDiv).html(dunwei);
                    $(xcDiv).html(xc);
                    $(wxDiv).html(wx);
                    $(gwDiv).html(gw);
                }
                if (res.errorMsg == null) {

                } else {
                    layer.msg(res.errorMsg);
                }
                var curnum = $("#curnum").val();

            }
        })


    });
</script>
</body>
</html>
